<template>
  <div class="dashboard-container">
    <div class="app-container">

      <page-tools :show-before="true">
        <!-- 兼容新旧版本 -->
        <template slot="before">
          <span>本月：入职 离职 调薪 未定薪</span>
        </template>
        <template slot="after">
          <el-button plain @click="$router.push('/salarys/settingsalary')">设置</el-button>
          <el-button plain @click="$router.push(`/salarys/payrollstatement/${yearMonth}?yearMonth=${yearMonth}`)">{{ yearMonth }}月报表</el-button>

        </template>
      </page-tools>
      <Duoxuan />

      <!-- 表格 -->
      <el-card class="botton-card">
        <template>
          <el-table
            :data="userformData"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              width="150"
              type="index"
            />
            <el-table-column
              prop="username"
              label="姓名"
              width="120"
            />
            <el-table-column
              prop="mobile"
              label="手机"
              width="150"
            />
            <el-table-column
              prop="currentBasicSalary"
              label="工号"
              width="120"
            />
            <el-table-column
              prop="formOfEmployment"
              label="聘用形式"
              width="120"
            >
              <template slot-scope="{row}">
                {{ row.formOfEmployment=== 1 ? '正式' : '非正式' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="departmentName"
              label="部门"
              width="120"
            />
            <el-table-column
              prop="timeOfEntry"
              label="入职时间"
              width="120"
            >
              <template slot-scope="obj">
                {{ obj.row.timeOfEntry | formatDate }}
              </template>
            </el-table-column>
            <el-table-column
              prop="currentBasicSalary"
              label="工资基数"
              width="120"
            >
              <template slot-scope="{row}">
                {{ row.currentBasicSalary+row.currentPostWage }}
              </template>
            </el-table-column>
            <el-table-column
              prop="scheme"
              label="津贴方案"
              width="120"
            >
              通用方案
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
            >
              <template slot-scope="{row}">
                <el-button v-if=" row.currentBasicSalary+row.currentPostWage>0" type="primary" size="small" @click.native="salaryadjust(row.id)">调薪</el-button>
                <el-button v-else type="danger" size="small" @click.native="decidepay(row.id)">定薪</el-button>
                <el-button plain size="small" @click="$router.push('/salarys/details/'+yearMonth+'/'+row.id)">查看</el-button>
              </template>
            </el-table-column>

          </el-table>
        </template>
        <!-- 分页 -->
        <template>
          <div class="block">
            <el-pagination
              :current-page="currentPage4"
              :page-sizes="[3, 5, 8, 10]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </template>
      </el-card>

    </div>
    <el-dialog
      title="调薪"
      :visible.sync="showData"
    >
      <Dialoge ref="Dialoge" :aslays-list="aslaysList" :user-id="userId" :show-data.sync="showData" @success="getsalaryslist" />
    </el-dialog>
    <el-dialog
      title="调薪"
      :visible.sync="DinxingshowData"
    >
      <Dinxing :user-id="userId" @onDinxingshowData="DinxingshowData=false" @success="getsalaryslist" />
    </el-dialog>
  </div>
</template>

<script>
import { getsalaryslist, getsalarysmoney, getsalarysCompanySetting } from '@/api/salarys'
import Dialoge from './components/dialog'
import Duoxuan from './components/duoxuan'
import Dinxing from './components/dinxing'
export default {
  components: {
    Dialoge, Duoxuan, Dinxing
  },
  data() {
    return {

      aslaysList: {}, // 用户薪资
      userformData: [], // 员工信息列表
      currentPage4: 1, // 当前页
      total: 0, // 员工总条数
      page: {
        page: 1,
        pageSize: 10
      },
      selectParams: {
        officialcheckList: [],
        trainingcheckList: [],
        sectionlistcheckList: []
      }, // 筛选
      showData: false, // 弹框
      DinxingshowData: false,
      userId: '',
      yearMonth: '' // 上传使用年月文件夹

    }
  },

  watch: {

  },
  created() {
    this.getsalaryslist() // 薪资列表
  },
  methods: {
    // 筛选功能
    changeSelectParams(selectParams) {
      this.selectParams.officialcheckList = selectParams.officialcheckList
      this.selectParams.trainingcheckList = selectParams.trainingcheckList
      this.selectParams.sectionlistcheckList = selectParams.sectionlistcheckList
      this.page.page = 1
      this.getsalaryslist()
    },
    // 薪资列表
    async getsalaryslist() {
      const data = await getsalarysCompanySetting()
      this.yearMonth = data.dataMonth
      // 判断获取的多选按钮长度是否为空
      if (this.selectParams.sectionlistcheckList.length === 0) {
        const { rows, total } = await getsalaryslist({ ...this.page, ...this.selectParams })
        this.total = total
        this.userformData = rows
      } else {
        const { rows, total } = await getsalaryslist({ ...this.page, ...this.selectParams })
        this.total = total
        this.userformData = rows.filter(item => {
          return this.selectParams.sectionlistcheckList.indexOf(item.departmentName) > -1
        })
      }
    },

    // 分页功能
    handleCurrentChange(id) {
      this.page.page = id
      this.getsalaryslist()
    },
    // 每页显示条数
    handleSizeChange(id) {
      this.page.pageSize = id
      this.getsalaryslist()
    },
    // 定薪
    decidepay(id) {
      this.userId = id
      this.DinxingshowData = true
    },
    writeoff() {
      this.aslaysList = {} // 用户薪资
      this.$refs.Dialoge.resetFields()
      this.showData = false
    },
    // 调薪
    async salaryadjust(id) {
      this.userId = id
      this.showData = true
      this.aslaysList = await getsalarysmoney(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.block{
  margin-top: 10px;
  float: right;
  padding: 15px;
}
.botton-card{
  margin-bottom: 10px;
}

</style>
